<template>
	<div class="container" v-loading='loading'>
		<div class="statusbar clearfix">
			<div class="w25 back" @click="fnBack()">
				<img src="../../assets/icon/back@2x.png" alt="">
				<span>返回</span>
			</div>
			<div class="w50 topcenter">
				<span>法律援助审批</span>
			</div>
			<div class="w25" v-if='state==1'>
				<span class="topsub" @click='tijiao'>提交</span>
			</div>
		</div>
		<div class="wrap" style="margin-top: 3.3rem;">
			<div class="content">
				<div class="row1 clearfix" style="margin-bottom: 10px;">
					<label for="" class="label">案件编号</label>
					<span>{{artic.code}}</span>
				</div>
        <div class="row1 clearfix" style="margin-bottom: 10px;">
					<label for="" class="label">案件状态</label>
					<span v-if="artic.status==0">提交申请</span>
          <span v-if="artic.status==1">已受理</span>
          <span v-if="artic.status==2">已拒绝</span>
          <span v-if="artic.status==3">完成</span>
				</div>
        <div class="row1 clearfix"  style="margin-bottom: 10px;" v-if="artic.rejectReason">
					<label for="" class="label">拒绝理由</label>
					<span class="describe">{{artic.rejectReason}}</span>
				</div>
				<div class="row1 clearfix" style="margin-bottom: 10px;"  v-if="artic.assignToUser">
					<label for="" class="label">处理人</label>
					<span>{{artic.assignToUser}}</span>
				</div>
        <div class="row1 clearfix" style="margin-bottom: 10px;" v-if="artic.processorName">
					<label for="" class="label">最终处理人</label>
					<span>{{artic.processorName}}</span>
				</div>
        <div class="row1 clearfix" style="margin-bottom: 10px;"  v-if="artic.status==3">
					<label for="" class="label">处理结果</label>
					<span>{{artic.result}}</span>
				</div>
        <div class="row1 clearfix" style="margin-bottom: 10px;" v-if="artic.approveRemark">
          <label for="" class="label">受理备注</label>
          <span>{{artic.approveRemark}}</span>
        </div>
        <div class="row1 clearfix" style="margin-bottom: 10px;"  v-if="artic.finshRemark">
					<label for="" class="label">完成备注</label>
					<span>{{artic.finshRemark}}</span>
				</div>
				<p style="color: #39589e;font-weight: 600;font-size: 1.5rem; text-align: left;">事项描述</p>
				<div class="row1 clearfix">
					<label for="" class="label">姓名</label>
					<span>{{artic.name}}</span>
				</div>
				<div class="row1 clearfix">
					<label for="" class="label">身份证号</label>
					<span>{{artic.identityNo}}</span>
				</div>
				<div class="row1 clearfix">
					<label for="" class="label">联系电话</label>
					<span>{{artic.mobilePhone}}</span>
				</div>
				<div class="row1 clearfix">
					<label for="" class="label">所属区域</label>
					<span>{{artic.district}}</span>
				</div>
				<div class="row1 clearfix">
					<label for="" class="label">联系地址</label>
					<span>{{artic.address}}</span>
				</div>
				<div class="row1 clearfix">
					<label for="" class="label">申请时间</label>
					<span>{{artic.creationTime |datas}}</span>
				</div>

				<div class="row1 clearfix">
					<label for="" class="label">人群类别</label>
					<span>{{artic.category}}</span>
				</div>
				<div class="row1 clearfix">
					<label for="" class="label">身份类别</label>
					<span>{{artic.identityCategory}}</span>
				</div>
				<div class="row1 clearfix">
					<label for="" class="label">家庭收入</label>
					<span>{{artic.familyIncome}}</span>
				</div>
				<div class="row1 clearfix">
					<label for="" class="label">申请事项</label>
					<span>{{artic.reason}}</span>
				</div>
				<div class="row1 clearfix">
					<label for="" class="label">事项描述</label>
					<span class="describe">{{artic.content}}</span>
				</div>
				

				<div v-if='state==3' class=" clearfix" style="margin-top: 10px;text-align: left;">
					<label for="" class="label" style="color: #39589e;font-weight: 600;font-size: 1.5rem;">评价</label>
					<el-rate disabled :texts=texts style='display: inline-block;' v-model="pingjia" show-text>
					</el-rate>
					<p style="color: #39589e;padding-left: 3.5rem; font-weight: 400;font-size: 1.3rem;margin-top: 1rem;">{{artic.evaluateText}}</p>
				</div>
				<div style="margin-top: 15px;">
					<el-button v-if='state==3' disabled type="success">处理完成</el-button>
					<el-button v-if='state==1' disabled type="success">受理中</el-button>
				</div>
			</div>
			<div v-if='state==0&&canLegalAidApprove' style="margin-top: 15px;">
				<el-button type="success" @click='accept'>受理</el-button>
				<el-button type="danger" @click='jujue'>拒绝</el-button>
			</div>

			<div class="content" style="margin-top: 1rem;" v-if='state==1'>
				<p style="color: #39589e;font-weight: 600;font-size: 1.5rem; text-align: left;">审批处理</p>
				<div class="row1 clearfix">
					<label for="" class="label">处理方式</label>
					 <!-- @change='chang' -->
					<el-select v-model="value1" placeholder="请选择" class='select' >
						<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" @click.native='chang'>
						</el-option>
					</el-select>
				</div>
				<div class="row1 clearfix" v-if='value1==4'>
					<label for="" class="label">调解方式</label>
					<el-select v-model="value2" placeholder="请选择" class='select'>
						<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
				<div class="row1 clearfix" v-if='value1==4'>
					<label for="" class="label">调解时间</label>
					<input type="date" class="dates" v-model="staDate">
				</div>
				<div class="row1 clearfix" v-if='value1==2&&canLegalAidApprove'>
					<label for="" class="label">选择机构</label>
					<el-select v-model="value5" placeholder="请选择" class='select' @change='cks'>
						<el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
				<div class="row1 clearfix" v-if='value1==2&&canLegalAidApprove'>
					<label for="" class="label">选择事务所</label>
					<el-select v-model="value4" placeholder="请选择" class='select' @change='ck'>
						<el-option v-for="item in options4" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
				<div class="row1 clearfix" v-if='value1==2&&canLegalAidApprove'>
					<label for="" class="label">选择律师</label>
					<el-select v-model="value3" placeholder="请选择" class='select'>
						<el-option v-for="item in options3" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
				<div class="row1 clearfix" v-if='value1==4' style="border-bottom: 1px solid #f1f1f2;">
					<label for="" class="label">调解信息</label>
					<input type="text" class="dates" v-model="tjxx">
				</div>
			</div>
		</div>

		<el-dialog title="备注" :visible.sync="dialogVisibleAccept" width="80%" class='eldoa' style='text-align: left;'>
			<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="remark">
			</el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibleAccept = false">取 消</el-button>
				<el-button type="primary" @click="handle(0)">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="拒绝原因" :visible.sync="dialogVisible" width="80%" class='eldoa' style='text-align: left;'>
			<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textareas">
			</el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handle(1)">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="处理结果" :visible.sync="dialogVisible1" width="95%" class='eldoa' style='text-align: left;'>
			<div class="wrap">
				<div class="row1 clearfix" style="border-bottom: 1px solid #f1f1f2;">
					<label style="width: 5.3rem;" for="" class="label">处理结果</label>
					<input type="text" class="dates" v-model="results">
				</div>
				<div class="row1 clearfix" style="border-bottom: 1px solid #f1f1f2;">
					<label style="width: 5.3rem;" for="" class="label">处理人</label>
					<input type="text" class="dates" v-model="persons">
				</div>
				<div class="row1 clearfix" style="border-bottom: 1px solid #f1f1f2;">
					<label style="width: 5.3rem;" for="" class="label">完成备注</label>
					<input type="text" class="dates" v-model="finshRemark">
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="resul()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import Api from "../../kites/api";
export default {
  name: "leAidetails",
  data() {
    return {
      results: "",
      persons: "",
      finshRemark: "",
      mediationAction: "1",
      dialogVisible1: false,
      dialogVisible: false,
      dialogVisibleAccept: false,
      loading: "",
      name: "李四",
      d: "",
      artic: {},
      options1: [
        {
          value: "2",
          label: "指派"
        },
        {
          value: "3",
          label: "完成"
        }
      ],
      value1: "",
      options2: [
        {
          value: 1,
          label: "现场调解"
        },
        {
          value: 2,
          label: "电话调解"
        },
        {
          value: 3,
          label: "视频调解"
        }
      ],
      options5: [
        {
          value: 0,
          label: "公共法律服务中心"
        },
        {
          value: 1,
          label: "律师事务所"
        },
        {
          value: 2,
          label: "基层法律服务所"
        },
        {
          value: 3,
          label: "人民调解委员会"
        },
        {
          value: 5,
          label: "村社区司法行政服务站"
        }
      ],
      value5: 0,
      value2: "",
      options3: [],
      value3: "",
      options4: [],
      value4: "",
      staDate: "",
      state: 5,
      remark: "",
      textareas: "",
      tjxx: "",
      canLegalAidApprove: false,
      canLegalAidAction: false,
      texts: ["极差", "差", "一般", "满意", "非常满意"],
      pingjia: 0
    };
  },
  beforeCreate() {
    this.openIds();
  },
  created() {
    this.id = this.$route.params.id;
    this.canLegalAidApprove =
      localStorage.canLegalAidApprove === "true" ? true : false;
    this.canLegalAidAction =
      localStorage.canLegalAidAction === "true" ? true : false;
    if (this.canLegalAidApprove == true) {
      //				this.options1=[
    }

    this.GetLegalAid();
    this.GetAllServiceAgency();
  },
  methods: {
    chang() {
      console.log(this.value1);
      if (this.value1 == "3") {
        //点击完成
        if (this.canLegalAidAction == true) {
          this.dialogVisible1 = true;
        } else {
          this.$message.error("对不起，该用户没有操作权限");
        }
      }
      if (this.value1 == "2") {
        //点击指派
        if (!(this.canLegalAidApprove == true)) {
          this.$message.error("对不起，该用户没有操作权限");
        }
      }
    },
    dispose() {
      this.dialogVisible1 = true;
    },
    resul() {
      if (this.results == "") {
        this.$message.error("处理结果不能为空");
        return false;
      }
      if (this.persons == "") {
        this.$message.error("处理人不能为空");
        return false;
      }
      this.loading = true;
      this.$post(Api.Action, {
        rejectReason: this.textareas,
        finshRemark: this.finshRemark,
        assignTo: 0,
        result: this.results,
        processorName: this.persons,
        type: "0",
        actionCode: 3,
        id: this.id
      }).then(res => {
        if (res.data.success == true) {
          this.loading = false;
          this.dialogVisible1 = false;
          // window.location.href = window.location.href;
           this.$router.push({
              path: "/HandleResult"
            });
        } else {
          this.loading = false;
          this.$message.error(res.data.error.message);
        }
      });
    },
//  //获取公共机构
//  GetAllServiceAgency(){
//  	
//  },
    // 受理
    accept() {
      this.dialogVisibleAccept = true;
    },
    jujue() {
      this.dialogVisible = true;
    },
    //返回上一页
    fnBack() {
      this.$router.push({
        path: "/Onapprove"
      });
    },
    GetLegalAid() {
      this.loading = true;
      this.$post(Api.GetLegalAid, {
        id: this.id
      }).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.loading = false;
          this.artic = res.data.result;
          this.state = this.artic.status;
          this.pingjia = this.artic.evaluate;
        } else {
          this.loading = false;
          this.$message.error(res.data.error.message);
        }
      });
    },
    cks() {
      this.GetAllServiceAgency();
    },
    ck() {
      this.GetLegalAidAssignUsers();
    },
    //获取所有律师事务所
    GetAllServiceAgency() {
      this.options4 = [];
      this.value4 = "";
      this.$post(Api.GetAllServiceAgency, {
        type: this.value5
      }).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.loading = false;
          this.options4 = res.data.result;
          this.value4 = this.options4.length > 0 ? this.options4[0].id : "";
          this.GetLegalAidAssignUsers();
        } else {
          this.loading = false;
          this.$message.error(res.data.error.message);
        }
      });
    },
    //通过律师事务所获取律师
    GetLegalAidAssignUsers() {
      this.options3 = [];
      this.value3 = "";
      this.$post(Api.GetLegalAidAssignUsers, {
        serviceAgencyId: this.value4
      }).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.loading = false;
          this.options3 = res.data.result;
        } else {
          this.loading = false;
          this.$message.error(res.data.error.message);
        }
      });
    },
    tijiao() {
      if (this.value3 == "") {
        this.$message.error("指派人员不能为空");
        return false;
      }
      this.loading = true;
      this.$post(Api.Action, {
        rejectReason: this.textareas,
        assignTo: this.value3,
        result: "",
        processorName: "",
        type: "0",
        actionCode: 2,
        id: this.id
      }).then(res => {
        if (res.data.success == true) {
          this.loading = false;
          // window.location.href = window.location.href;
           this.$router.push({
              path: "/HandleResult"
            });
        } else {
          this.loading = false;
          this.$message.error(res.data.error.message);
        }
      });
    },
    handle(types) {
      this.loading = true;
      this.$post(Api.Action, {
        rejectReason: this.textareas,
        approveRemark: this.remark,
        assignTo: 0,
        result: "",
        processorName: "",
        type: "0",
        actionCode: types,
        id: this.id
      }).then(res => {
        if (res.data.success == true) {
          this.loading = false;
          this.dialogVisible = false;
          this.dialogVisibleAccept = false;
          // window.location.href = window.location.href;
           this.$router.push({
              path: "/HandleResult"
            });
        } else {
          this.loading = false;
          this.$message.error(res.data.error.message);
        }
      });
    }
  }
};
</script>
<style scoped>

.wrap .row {
  width: 100%;
  line-height: 3.3rem;
  border-bottom: 1px solid #f1f1f2;
  color: #606266;
}
.wrap .row .label {
  display: inline-block;
  width: 8.3rem;
  float: left;
  text-align: left;
  font-size: 1.3rem;
  color: #5a5959;
}
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 1.6rem;
  box-sizing: border-box;
  z-index: 10;
  background: rgba(0, 0, 0, 0.3);
}

.mask .model {
  background-color: #ffffff;
  border-radius: 0.8rem;
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 0.8rem;
}

.mask .model p {
  display: inline-block;
  width: 100%;
}

.mask .model .h1 {
  font-size: 1.5rem;
  color: #595757;
  text-align: center;
  font-weight: 600;
  line-height: 4rem;
}

.mask .model .h2 {
  font-size: 1.1rem;
  color: #333;
  text-align: left;
  font-weight: 600;
}

.mask .model .h3 {
  font-size: 1.1rem;
  color: #333;
  text-align: left;
  text-indent: 2rem;
  line-height: 2rem;
}

.mask .model .btn {
  width: 100%;
  margin: 0.8rem 0;
}

.mask .model .btn button {
  width: 60%;
  font-size: 1.25rem;
  padding: 0.4rem 0;
  outline: none;
  border: none;
  color: #ffffff;
  border-radius: 0.8rem;
  background-color: #39589e;
}

.wrap {
  padding-bottom: 0 !important;
}

.wrap .content {
  padding: 0.8rem 1.6rem;
}

.wrap .row1 {
  width: 100%;
  line-height: 4rem;
  border-bottom: 1px solid #f1f1f2;
  color: #606266;
}

.wrap .row1 .dates {
  width: calc(100% - 9rem);
  border: none;
  outline: none;
  font-size: 1.25rem;
  color: #606266;
  text-indent: 0.5rem;
}

.wrap .row1:last-child {
  border-bottom: none;
}

.wrap .row1 .label {
  display: inline-block;
  width: 8.3rem;
  float: left;
  text-align: left;
  font-size: 1.3rem;
  color: #595757;
}

.wrap .row1 .radio {
  box-sizing: border-box;
  width: calc(100% - 9rem);
  height: 2.5rem;
  border-radius: 0.4rem;
  outline: none;
  border: none;
  float: right;
  font-size: 1.3rem;
  text-align: left;
}

.wrap .row1 span {
  box-sizing: border-box;
  width: calc(100% - 9rem);
  height: 2.5rem;
  border-radius: 0.4rem;
  font-size: 1.3rem;
  color: #1a1a1a;
  text-align: left;
  display: inline-block;
}

.wrap .row1 .select {
  box-sizing: border-box;
  width: calc(100% - 9rem);
  height: 2.5rem;
  border-radius: 0.4rem;
  outline: none;
  border: none;
  font-size: 1.3rem;
}

.wrap .row1 .btn button {
  float: left;
  outline: none;
  border: none;
  color: #5a5959;
  font-size: 1.25rem;
  border-radius: 0.4rem;
  padding: 0.4rem 0.8rem;
  margin: 0.4rem;
  background-color: #efefef;
}

.wrap .row1 .btn button.active {
  color: #fff !important;
  background-color: #39589e !important;
}

.wrap .row1 .describe {
  line-height: 3rem;
  height: auto;
  word-wrap: break-word;
  word-break: normal;
}

.wrap .row1 textarea {
  outline: none;
  border: none;
  width: 100%;
  font-size: 1.25rem;
  color: #606266;
  font-family: "微软雅黑";
}

.red {
  color: red;
}

.ends {
  background: #e6e6e6;
  margin-top: 15px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
</style>